{% extends 'extends/nav_front_all_.html' %}

{% block main %}
    <div class="container py-5">
    <div class="row">
        <div class="col-md-3">
             <div class="card my-4 p-3">
                    <div class="d-flex align-items-center">
                        <img id="user-avatar" src="" alt="头像" class="img-thumbnail me-3" style="width: 80px; height: 80px; object-fit: cover;">

                        <div class="d-flex flex-column">
                            <span class="mb-1">
                                <strong>用户：</strong>
                                <a id="user-name" href="#" class="text-decoration-none" target="_blank">用户名加载中...</a>
                            </span>
                            <span class="mb-1"><strong>管理员：</strong><span id="user-admin">否</span></span>
                            <span class="mb-1"><strong>角色：</strong><span id="user-role">加载中</span></span>
                        </div>
                    </div>

                    <hr>
                    <p id="user-intro">用户简介加载中...</p>
                </div>

                <!-- 用户互动功能卡片 -->
                <div class="card my-4 p-3">
                    <h5 class="card-title">用户互动</h5>
                    <hr>

                    <div class="d-flex">
                        <button id="follow-btn"></button>
                        <button id="like-btn"></button>

                    </div>

                    <div class="mt-3">
                        <textarea id="comment-input" class="form-control mb-2" rows="3" placeholder="写下你的评论..."></textarea>
                        <button id="comment-submit" class="btn btn-primary btn-sm">发布评论</button>
                    </div>
                </div>


        </div>

        <!-- 主内容区 -->
        <div class="col-md-9">
                <div class="container my-4">
                    <div class="card mb-4 p-4">
                        <h2 class="fw-bold" id="post-title">标题加载中...</h2>
                        <hr>
                        <div id="post-content" class="mb-4">内容加载中...</div>
                        <div class="text-muted small">
                            <p><strong>发布时间：</strong><span id="post-time">发布时间加载中...</span></p>
                {#            <p><strong>点赞数：</strong><span id="post-likes-count">0</span> 个点赞</p>#}
                {#            <p><strong>评论数：</strong><span id="post-comments-count">0</span> 条评论</p>#}

                        </div>
                    </div>

                    <div class="card p-3">
                        <h4>评论</h4>
                        <ul id="comments-list" class="list-group list-group-flush"></ul>
                    </div>
                </div>
        </div>
    </div>
</div>

<script>
function updateButton(btn) {
  const isLiked = btn.dataset.liked === 'true';
  btn.className = isLiked
    ? 'btn btn-danger btn-sm flex-grow-1'
    : 'btn btn-outline-danger btn-sm flex-grow-1';
  btn.textContent = isLiked ? '已点赞' : '点赞帖子';
}

function updateFollowButton(btn) {
  const isFollowed = btn.dataset.followed === 'true';
  btn.className = isFollowed
    ? 'btn btn-primary btn-sm flex-grow-1'
    : 'btn btn-outline-primary btn-sm flex-grow-1';
  btn.textContent = isFollowed ? '已关注' : '关注用户';
}




const pid={{ pid }};
const uid={{ uid }};

onUrlsReady(urls=>{
    Fetch(urls.info.authordetail,'get',{'pid':pid},res=>{
        if (res.status !== 'success') return alert('加载失败，请稍后重试');
        let postData = res.data;

        Element_('user-avatar').src = postData.img_icon || '/static/img/default.png';
        Element_('user-name').textContent = postData.username || '未知用户';
        Element_('user-name').href=urls.page.front.personaldetail.replace(0,postData.uid);
        Element_('user-role').textContent = postData.role || '未知';
        Element_('user-admin').textContent = postData.admin ? '是' : '否';
        Element_('user-intro').textContent = postData.intro || '暂无简介';

    });

    Fetch(urls.info.postdetail,'get',{'pid':pid},res=>{
        if (res.status !== 'success') return alert('加载失败，请稍后重试');
        let postData = res.data;

        Element_('post-title').textContent = postData.title || '无标题';
        Element_('post-time').textContent = postData.time || '未知时间';
        Element_('post-content').innerHTML = postData.content || '无内容';
    });

    Fetch(urls.service.likeorcancel, 'get', { pid:pid }, res => {
      if (res.status === 'success') {
        const btn = document.getElementById('like-btn');

        // 设置初始状态
        btn.dataset.liked = res.data.liked;
        updateButton(btn);

        // 点击事件 - 纯切换逻辑
        btn.onclick = () => {
          const newState = btn.dataset.liked === 'true' ? 'false' : 'true';
          const method = newState === 'true' ? 'post' : 'delete';

          Fetch(urls.service.likeorcancel, method, { pid:pid }, res => {
            if (res.status === 'success') {
              btn.dataset.liked = newState;
              updateButton(btn);
              Flash(res.msg);
            }
          });
        };
      }
    });


    Fetch(urls.service.followorcancel, 'get', { uid:uid }, res => {
        if (res.status === 'success') {
          const followBtn = document.getElementById('follow-btn');

          // 设置初始状态
          followBtn.dataset.followed = res.data.followed;
          updateFollowButton(followBtn);

          // 点击事件 - 纯切换逻辑
          followBtn.onclick = () => {
            const newState = followBtn.dataset.followed === 'true' ? 'false' : 'true';
            const method = newState === 'true' ? 'post' : 'delete';

            Fetch(urls.service.followorcancel, method, { uid:uid }, res => {
              if (res.status === 'success') {
                followBtn.dataset.followed = newState;
                updateFollowButton(followBtn);
                Flash(res.msg);
              }
            });
          };
        }
    });

    Event_('comment-submit','click',event=>{
        Fetch(urls.service.commentorcancel,'post',{
            pid:pid,
            content:Element_('comment-input').value
        },async res => {
            await Flash(res.msg)
            Redirect()
        })
    })

    Fetch(urls.service.commentorcancel, 'get', {pid: pid}, res => {
        if (res.status === 'success') {
            res.data.comments.forEach(comment => {
                const commentItem = document.createElement('li');
                commentItem.className = 'list-group-item';

                // 构建评论内容HTML
                commentItem.innerHTML = `
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <strong>
                                <a href="${urls.page.front.personaldetail.replace('0', comment.uid)}"
                                   class="text-decoration-none">
                                    ${comment.username || '用户'}
                                </a>
                            </strong>
                            <small class="text-muted ms-2">${comment.time}</small>
                            <div class="mt-2">${comment.content}</div>
                        </div>
                    </div>
                `;

                Element_('comments-list').appendChild(commentItem);
            });
        }
    });
});
</script>

{% endblock %}